<template>
  <div class="login-container">
    <!-- 星空背景 -->
    <div class="stars">
      <div v-for="n in 20" :key="n" class="star"></div>
    </div>
    
    <!-- 动态光环 -->
    <div class="light-rings">
      <div class="ring ring-1"></div>
      <div class="ring ring-2"></div>
    </div>
    
    <!-- 装饰线条 -->
    <div class="decoration-lines">
      <div v-for="n in 5" :key="n" class="line" :class="'line-' + n"></div>
    </div>
    
    <!-- 原有的浮动形状 -->
    <div class="floating-shapes">
      <div v-for="n in 5" :key="n" class="shape" :class="'shape-' + n"></div>
    </div>
    
    <!-- 网格背景 -->
    <div class="grid-background"></div>
    
    <!-- 主要内容 -->
    <div class="login-box">
      <div class="brand-logo">
        <div class="logo-circle">
          <i class="el-icon-document"></i>
        </div>
        <h1>文档管理系统</h1>
      </div>
      
      <el-card class="login-card">
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          class="login-form"
          :size="isLogin ? 'large' : 'default'"
        >
          <el-form-item prop="username">
            <el-input 
              v-model="form.username" 
              :prefix-icon="User"
              placeholder="用户名"
            />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input 
              v-model="form.password" 
              type="password" 
              :prefix-icon="Lock"
              placeholder="密码"
              show-password
            />
          </el-form-item>
          
          <template v-if="!isLogin">
            <el-form-item prop="password2">
              <el-input 
                v-model="form.password2" 
                type="password"
                :prefix-icon="Lock"
                placeholder="确认密码"
                show-password
              />
            </el-form-item>
            
            <div class="form-row">
              <el-form-item prop="email" class="form-item-half">
                <el-input 
                  v-model="form.email" 
                  type="email"
                  :prefix-icon="Message"
                  placeholder="邮箱"
                />
              </el-form-item>
              
              <el-form-item prop="phone" class="form-item-half">
                <el-input 
                  v-model="form.phone"
                  :prefix-icon="Phone"
                  placeholder="手机号"
                />
              </el-form-item>
            </div>
          </template>
          
          <el-form-item>
            <el-button 
              type="primary" 
              @click="handleSubmit" 
              :loading="loading"
              class="submit-btn"
            >
              {{ isLogin ? '登录' : '注册' }}
            </el-button>
          </el-form-item>
          
          <div class="form-footer">
            <el-button 
              link
              @click="toggleMode"
              class="toggle-btn"
            >
              {{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}
            </el-button>
          </div>
        </el-form>

        <div v-if="isLogin" class="default-account">
          <el-text size="small">
            默认账号：admin / 123456
          </el-text>
        </div>
      </el-card>
    </div>

    <!-- 添加右侧功能介绍区域 -->
    <div class="feature-showcase">
      <h2 class="feature-title">
        功能介绍
      </h2>
      <ul class="feature-list">
        <li class="feature-item">
          <div class="feature-icon">
            <i class="el-icon-document"></i>
          </div>
          <div class="feature-content">
            <h3>文档管理</h3>
            <p>高效管理各类文档，随时随地访问和编辑。</p>
          </div>
        </li>
        <li class="feature-item">
          <div class="feature-icon">
            <i class="el-icon-share"></i>
          </div>
          <div class="feature-content">
            <h3>团队协作</h3>
            <p>与团队成员实时协作，提高工作效率。</p>
          </div>
        </li>
        <li class="feature-item">
          <div class="feature-icon">
            <i class="el-icon-security"></i>
          </div>
          <div class="feature-content">
            <h3>数据安全</h3>
            <p>严格的数据安全措施，确保数据安全。</p>
          </div>
        </li>
        <li class="feature-item">
          <div class="feature-icon">
            <i class="el-icon-mobile-phone"></i>
          </div>
          <div class="feature-content">
            <h3>移动访问</h3>
            <p>随时随地通过手机访问和编辑文档。</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Lock, Message, Phone } from '@element-plus/icons-vue'
import http from '../utils/axios'
import { useRouter } from 'vue-router'

const router = useRouter()

const API_BASE_URL = `${import.meta.env.VITE_API_URL}/api`

const isLogin = ref(true)
const loading = ref(false)
const formRef = ref()

const form = reactive({
  username: '',
  password: '',
  password2: '',
  email: '',
  phone: ''
})

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.password) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于 6 个字符', trigger: 'blur' }
  ],
  password2: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatePass2, trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
})

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    if (isLogin.value) {
      // 登录
      try {
        const response = await http.post('/auth/login/', {
          username: form.username,
          password: form.password
        })
        
        if (response && response.data) {
          // 存储token和用户信息
          localStorage.setItem('access_token', response.data.access)
          localStorage.setItem('refresh_token', response.data.refresh)
          localStorage.setItem('username', form.username)
          
          // 获取并存储用户ID
          try {
            const userResponse = await http.get('/auth/users/profile/')
            if (userResponse && userResponse.data && userResponse.data.id) {
              localStorage.setItem('user_id', userResponse.data.id)
            }
          } catch (userError) {
            console.error('获取用户信息失败:', userError)
          }
          
          // 设置axios默认headers
          http.defaults.headers.common['Authorization'] = `Bearer ${response.data.access}`
          
          ElMessage.success('登录成功')
          router.push('/dashboard')
        }
      } catch (error) {
        console.error('登录失败:', error)
        ElMessage.error('登录失败：' + (error.response?.data?.detail || '用户名或密码错误'))
      }
    } else {
      // 注册
      try {
        const response = await http.post('/auth/register/', {
          username: form.username,
          password: form.password,
          email: form.email,
          phone: form.phone
        })
        
        if (response && response.data) {
          ElMessage.success('注册成功，请登录')
          isLogin.value = true
          form.password = ''
          form.password2 = ''
        }
      } catch (error) {
        console.error('注册失败:', error)
        ElMessage.error('注册失败：' + (error.response?.data?.detail || '请检查输入信息'))
      }
    }
  } catch (error) {
    console.error('Form validation error:', error)
  } finally {
    loading.value = false
  }
}

const toggleMode = () => {
  isLogin.value = !isLogin.value
  formRef.value?.resetFields()
}

// 在mounted时动态生成星星位置
onMounted(() => {
  const stars = document.querySelectorAll('.star')
  stars.forEach(star => {
    star.style.left = `${Math.random() * 100}%`
    star.style.top = `${Math.random() * 100}%`
    star.style.animationDelay = `${Math.random() * 4}s`
  })
})
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100vh;
  background-color: #1a1a1a;
  position: relative;
  overflow: hidden;
}

/* 星空背景 */
.stars {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--duration, 4s) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* 动态光环 */
.light-rings {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ring {
  position: absolute;
  border: 2px solid rgba(107, 70, 193, 0.1);
  border-radius: 50%;
  animation: expand 10s infinite;
}

.ring-1 {
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 0s;
}

.ring-2 {
  width: 800px;
  height: 800px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -3s;
}

.ring-3 {
  width: 1000px;
  height: 1000px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -6s;
}

@keyframes expand {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
  }
}

/* 装饰线条 */
.decoration-lines {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(107, 70, 193, 0.2), transparent);
  height: 1px;
  width: 100%;
  animation: moveLine 8s linear infinite;
}

@keyframes moveLine {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* 为星星和线条生成随机位置和动画延迟 */
.star:nth-child(3n) { --duration: 3s; }
.star:nth-child(3n+1) { --duration: 4s; }
.star:nth-child(3n+2) { --duration: 5s; }

.line:nth-child(5n) { animation-delay: 0s; top: 20%; }
.line:nth-child(5n+1) { animation-delay: -1.6s; top: 40%; }
.line:nth-child(5n+2) { animation-delay: -3.2s; top: 60%; }
.line:nth-child(5n+3) { animation-delay: -4.8s; top: 80%; }
.line:nth-child(5n+4) { animation-delay: -6.4s; top: 90%; }

/* 网格背景 */
.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(107, 70, 193, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 70, 193, 0.2) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.2;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center top;
  animation: none;
}

/* 浮动形状 */
.floating-shapes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.shape {
  position: absolute;
  background: rgba(107, 70, 193, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  animation: float 20s infinite;
  border: 1px solid rgba(107, 70, 193, 0.2);
  box-shadow: inset 0 0 20px rgba(107, 70, 193, 0.1);
}

.shape-1 {
  width: 500px;
  height: 500px;
  left: -10%;
  top: -10%;
  animation-delay: -2s;
  background: radial-gradient(circle at center, rgba(107, 70, 193, 0.2), transparent);
}

.shape-2 {
  width: 400px;
  height: 400px;
  right: -5%;
  top: 20%;
  animation-delay: -4s;
  background: radial-gradient(circle at center, rgba(128, 90, 213, 0.2), transparent);
}

.shape-3 {
  width: 600px;
  height: 600px;
  left: 30%;
  bottom: -20%;
  animation-delay: -6s;
  background: radial-gradient(circle at center, rgba(107, 70, 193, 0.15), transparent);
}

.shape-4 {
  width: 350px;
  height: 350px;
  right: 25%;
  bottom: 10%;
  animation-delay: -8s;
  background: radial-gradient(circle at center, rgba(128, 90, 213, 0.15), transparent);
}

.shape-5 {
  width: 450px;
  height: 450px;
  left: 15%;
  top: 30%;
  animation-delay: -10s;
  background: radial-gradient(circle at center, rgba(107, 70, 193, 0.1), transparent);
}

.shape-6 {
  width: 550px;
  height: 550px;
  right: 15%;
  top: -15%;
  animation-delay: -12s;
  background: radial-gradient(circle at center, rgba(128, 90, 213, 0.1), transparent);
}

.shape-7 {
  width: 300px;
  height: 300px;
  left: 45%;
  top: 15%;
  animation-delay: -14s;
  background: radial-gradient(circle at center, rgba(107, 70, 193, 0.15), transparent);
}

.shape-8 {
  width: 250px;
  height: 250px;
  right: 40%;
  bottom: 25%;
  animation-delay: -16s;
  background: radial-gradient(circle at center, rgba(128, 90, 213, 0.2), transparent);
}

.shape-9 {
  width: 480px;
  height: 480px;
  left: -5%;
  bottom: 30%;
  animation-delay: -18s;
  background: radial-gradient(circle at center, rgba(107, 70, 193, 0.1), transparent);
}

.shape-10 {
  width: 420px;
  height: 420px;
  right: -8%;
  bottom: -10%;
  animation-delay: -20s;
  background: radial-gradient(circle at center, rgba(128, 90, 213, 0.15), transparent);
}

/* 动画效果 */
@keyframes float {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.8;
  }
  50% {
    transform: translate(10px, -10px);
    opacity: 0.9;
  }
}

@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 30px 30px;
  }
}

.login-box {
  width: 45%;
  max-width: 480px;
  min-width: 400px;
  padding: 40px;
  animation: fadeIn 0.5s ease-out;
  position: relative;
  z-index: 1;
}

.brand-logo {
  text-align: center;
  margin-bottom: 24px;
  color: white;
  position: relative;
}

.logo-circle {
  width: 64px;
  height: 64px;
  background: rgba(107, 70, 193, 0.3);
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  border: 2px solid rgba(107, 70, 193, 0.4);
  position: relative;
  overflow: hidden;
}

.logo-circle::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(107, 70, 193, 0.1) 48%,
    rgba(107, 70, 193, 0.3) 50%,
    rgba(107, 70, 193, 0.1) 52%,
    transparent 55%
  );
  animation: shine 3s infinite;
}

.logo-circle i {
  font-size: 32px;
  color: white;
  z-index: 1;
}

.brand-logo h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background: linear-gradient(45deg, #fff, #6B46C1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-card {
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 0 32px rgba(107, 70, 193, 0.05);
  border-radius: 20px;
  padding: 15px;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: cardShine 8s infinite;
}

@keyframes shine {
  0% {
    transform: rotate(0) translate(-50%, -50%);
  }
  100% {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}

@keyframes cardShine {
  0% {
    left: -100%;
  }
  20%, 100% {
    left: 100%;
  }
}

/* 保持其他现有样式不变，但调整颜色以适应新背景 */
:deep(.el-input__wrapper) {
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
  height: 44px;
  border-radius: 8px;
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-input__wrapper:hover),
:deep(.el-input__wrapper.is-focus:hover) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 15px rgba(107, 70, 193, 0.2) !important;
}

:deep(.el-input__inner) {
  color: rgba(255, 255, 255, 0.9) !important;
  height: 44px;
  background: transparent !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  caret-color: rgba(255, 255, 255, 0.9) !important;
}

:deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.4) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
}

:deep(.el-input__prefix) {
  color: rgba(255, 255, 255, 0.6);
}

:deep(.el-input__suffix) {
  color: rgba(255, 255, 255, 0.6);
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-input__wrapper.is-focus:hover) {
  box-shadow: 0 0 0 1px rgba(107, 70, 193, 0.3) !important;
}

:deep(.el-input__wrapper.is-focus .el-input__inner) {
  background: transparent !important;
}

:deep(.el-input__wrapper.is-focus .el-input__prefix),
:deep(.el-input__wrapper.is-focus .el-input__suffix) {
  color: rgba(255, 255, 255, 0.8);
}

/* 密码输入框的小眼睛图标样式 */
:deep(.el-input__password-icon) {
  color: rgba(255, 255, 255, 0.6) !important;
}

:deep(.el-input__password-icon:hover) {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 输入框验证失败时的样式 */
:deep(.el-form-item.is-error .el-input__wrapper) {
  background: rgba(255, 87, 87, 0.1) !important;
  border-color: rgba(255, 87, 87, 0.2) !important;
  box-shadow: 0 0 0 1px rgba(255, 87, 87, 0.2) !important;
}

:deep(.el-form-item.is-error .el-input__wrapper:hover),
:deep(.el-form-item.is-error .el-input__wrapper.is-focus) {
  border-color: rgba(255, 87, 87, 0.3) !important;
  box-shadow: 0 0 0 1px rgba(255, 87, 87, 0.3) !important;
}

/* 自动填充时的背景色 */
:deep(.el-input__inner:-webkit-autofill) {
  -webkit-box-shadow: 0 0 0 1000px rgba(107, 70, 193, 0.1) inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  caret-color: rgba(255, 255, 255, 0.9) !important;
}

:deep(.el-input__inner:-webkit-autofill:focus) {
  -webkit-box-shadow: 0 0 0 1000px rgba(107, 70, 193, 0.15) inset !important;
}

.submit-btn {
  width: 100%;
  height: 44px;
  background: linear-gradient(45deg, #6B46C1, #805AD5) !important;
  border: none !important;
  font-weight: 600;
  font-size: 16px;
  border-radius: 8px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(107, 70, 193, 0.4);
}

.submit-btn::after {
  animation: none;
}

/* 保持其他现有样式 */
.toggle-btn {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  color: white !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-item-half {
  flex: 1;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

.default-account {
  text-align: center;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:deep(.el-card__body) {
  padding: 30px;
}

:deep(.el-form-item__error) {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 添加模糊背景 */
.login-container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(107, 70, 193, 0.1), rgba(0, 0, 0, 0.3));
  pointer-events: none;
  z-index: 0;
}

/* 添加右侧功能介绍区域 */
.feature-showcase {
  width: 55%;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
  z-index: 1;
}

.feature-title {
  font-size: 36px;
  color: white;
  margin-bottom: 30px;
  text-shadow: 0 2px 10px rgba(107, 70, 193, 0.3);
  opacity: 0;
  animation: slideInRight 0.8s ease-out forwards;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  opacity: 0;
  transform: translateX(50px);
  animation: slideInRight 0.8s ease-out forwards;
}

.feature-item:nth-child(1) { animation-delay: 0.2s; }
.feature-item:nth-child(2) { animation-delay: 0.4s; }
.feature-item:nth-child(3) { animation-delay: 0.6s; }
.feature-item:nth-child(4) { animation-delay: 0.8s; }

.feature-icon {
  width: 48px;
  height: 48px;
  background: rgba(107, 70, 193, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon i {
  font-size: 24px;
  color: white;
}

.feature-content {
  flex: 1;
}

.feature-content h3 {
  color: white;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
}

.feature-content p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 添加分隔线 */
.divider {
  position: absolute;
  left: 45%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(107, 70, 193, 0.2),
    rgba(107, 70, 193, 0.3),
    rgba(107, 70, 193, 0.2),
    transparent
  );
}

/* 优化动画性能 */
.star, .ring, .line, .shape {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 减少动画复杂度 */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes expand {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
  }
}

@keyframes moveLine {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.8;
  }
  50% {
    transform: translate(10px, -10px);
    opacity: 0.9;
  }
}

/* 优化背景渲染 */
.grid-background {
  background-size: 50px 50px;
  opacity: 0.2;
  animation: none;
}

/* 优化模糊效果 */
.login-card {
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.05);
}

/* 优化输入框样式 */
:deep(.el-input__wrapper) {
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* 优化按钮动画 */
.submit-btn::after {
  animation: none;
}

/* 优化特性展示区动画 */
.feature-item {
  animation-duration: 0.5s;
}
</style> 